//div做上传区域时使用的配置
Dropzone.autoDiscover = false;// 禁止对所有元素的自动查找，由于Dropzone会自动查找class为dropzone的元素，自动查找后再在这里进行初始化，有时候（并不是都这样）会导致重复初始化的错误，所以在此加上这段代码避免这样的错误。
$(".dropzone").dropzone({
    //项目使用.net，所以此处的action就这样了。该参数必须指定。
    url: 'ajax.php',
    //改变文件框中的文字提示
    dictDefaultMessage: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-upload-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0z"/></svg>点此处选择文件、或拖动文件到这里',
//方式指定
    method: 'post',
    //filesizeBase: 102400000,//这个选项将设置在计算文件大小时使用 1000 还是使用 1024作为基本单位
    //dropzone同时上传的文件不能超过6个，所以parallelUploads的设置就不能大于6，大于6后就会出现“超过最大长度”   //错误，导致上传失败
    parallelUploads: 5,//有多少文件将上载到并行处理,默认2(一次最多上传不能超过6个，小于等于6个的传完后，再上传  //第二批的文件)
    maxFilesize: 100,//以MB为单位[上传文件的大小限制]
    autoProcessQueue: false,//关闭自动上传功能，默认会true会自动上传,也就是添加一张图片向服务器发送一次请求
    addRemoveLinks: true,//在每个预览文件下面添加一个remove[删除]或者cancel[取消](如果文件已经上传)上传文件的链  接
    uploadMultiple: true,//允许上传多文件
    dictCancelUpload: '取消',
    dictRemoveFile: '删除',
    dictFallbackMessage: '不好意思，您的浏览器不支持！',//如果浏览器不支持,默认消息将被替换为这个文本。默认为 “Your browser does not support drag'n'drop file uploads.”。
    dictInvalidFileType: '该文件不允许上传',//如果文件类型不匹配时显示的错误消息。
    dictResponseError: '上传失败，请稍后重试',//如果服务器响应是无效的时候显示的错误消息。 {{statusCode}} ` 将被  替换为服务器端返回的状态码。
    //acceptedFiles: 'image/*,audio/*,video/*,application/zip,application/rar,application/gz',
    //函数绑定
    init: function () {
        var submitButton = $(".saveForm")
        let myDropzone = this; // closure

        //为上传按钮添加点击事件
        submitButton.on("click", function () {
            $('.wb-progress button').hide();
            $('.wb-progress span').show();

            if ($('.return-box').hasClass('show')) {
                location.reload();
                return;
            }


            let uploadType = $("input[name='type']:checked").val();

            //判断上传的文件不为空时,（保证没有选择文件的时候不进行上传操作）
            if (uploadType == 1 && myDropzone.getAcceptedFiles().length == 0) {
                console.log("没有选择任何文件");
                showAlert('没有选择任何文件');
                $('.wb-progress span').hide();
                $('.wb-progress button').show();
                return;
            }

            if (uploadType == 1 && myDropzone.getAcceptedFiles().length > 5) {
                showAlert('单次最多上传5个文件');
                $('.wb-progress span').hide();
                $('.wb-progress button').show();
                return;
            }


            //这里做一下预提交，服务器返回一个SID来组合到地址里
            let sid = prepareUpload(uploadType);
            if (!sid) {
                $('.wb-progress span').hide();
                $('.wb-progress button').show();
                console.log('no sid stop');
                return;
            }
            myDropzone.options.url = 'ajax.php?sid=' + sid;
            myDropzone.processQueue();
        });

        //上传完成后回调
        this.on("successmultiple", function (file, res) {
            console.log('上传successmultiple事件', file, res);
            $('.wb-progress span').hide();
            $('.wb-progress button').show();
            if (res.code != 200) {
                showAlert(res.msg);
                return;
            }

            showDownload(res.data);
        });

        // 上传进度条
        this.on("totaluploadprogress", function (progress) {
            $('.wb-progress .progress-bar').attr('style', "width:" + progress + "%");
            $('.wb-progress .progress-bar').text((progress | 0) + "%");
        });
    }
});

/*开始上传前的准备工作*/
function prepareUpload(type) {
    let desc = $('#desc').val(), exp = $('#exp').val(), times = $('#times').val(), password = $('#password').val(),
        wordtext = $('.wordtext').val();

    if (type == 2 && (wordtext.length < 5 || wordtext.length > 5000)) {
        showAlert('分享文字数量在5 - 5000字之间，当前' + wordtext.length);
        return;
    }

    if (desc.length > 30) {
        showAlert('备注不超过30字');
        return;
    }

    if (!/^[0-9]*$/g.test(exp)) {
        showAlert('过期天数非数字');
        return;
    }

    if (!/^[0-9]*$/g.test(times)) {
        showAlert('下载次数非数字');
        return;
    }

    if (password.length > 0 && (password.length != 6 || !/^[A-Za-z0-9]+$/g.test(password))) {
        showAlert('下载密码应为6位字母或数字');
        return;
    }
    let sid = '';
    $.ajaxSettings.async = false;
    $.post("ajax.php", {
        type: type, desc: desc, exp: exp, times: times, password: password, wordtext: wordtext
    }, function (result) {
        if (typeof result.code == "undefined") {
            showAlert('接口返回错误');
            return;
        }
        if (result.code != 200) {
            showAlert(result.msg);
            return;
        }
        console.log(result);
        //上传文本后直接显示结果跳出文件上传环节
        if (type == 2) {
            showDownload(result.data);
            return;
        }
        sid = result.data;
    });
    return sid;
}


//type = danger|warning|info
function showAlert(msg, type = 'danger', time = 3000) {
    let html = `<div class="alert alert-${type} d-flex align-items-center position-absolute wb-alert fade show" role="wbalert">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img"><use xlink:href="#exclamation-triangle-fill"/></svg>
    <div>
        ${msg}
    </div>
</div>`;
    $('.container').append(html);
    let s = $('.wb-alert');
    setTimeout(function () {
        s.remove()
    }, time);
}

function showDownload(info) {
    let url = window.location.protocol + '//' + window.location.host + window.location.pathname;
    showQrcode(url + '?sid=' + info.sid);
    let html = '<p>提取链接： <span class="user-select-all">' + url + '?sid=' + info.sid + '</span><span class="bd-clipboard"><button type="button" class="btn-clipboard"  title="复制到剪切板">复制</button></span></p>';
    html += '<p>提取代码： <span class="user-select-all">' + info.sid + '</span><span class="bd-clipboard"><button type="button" class="btn-clipboard" title="复制到剪切板">复制</button></span></p>';
    if (info.password) {
        html += '<p>提取密码： <span class="user-select-all">' + info.password + '</span><span class="bd-clipboard"><button type="button" class="btn-clipboard" title="复制到剪切板">复制</button></span></p>';
    }
    if (info.count > 0) {
        html += '<p>共上传了 <strong>' + info.count + '</strong> 个文件 ，有效期： <strong>' + info.exp + '</strong> </p>';
    } else {
        html += '<p>有效期： <strong>' + info.exp + '</strong> </p>'
    }
    $('.return-box .text-success').html(html);
    $('.upload-box').hide();
    $('.return-box').fadeIn();
    $('.return-box').addClass('show');
    $('.saveForm').text('继续上传');
}

function showQrcode(url) {
    $('.qrcode-box').qrcode({
        render: "canvas",
        text: url,
        width: "120", 	// 二维码的宽度
        height: "120", 	// 二维码的高度
        background: "#ffffff", 	// 二维码的后景色
        foreground: "#198753", 	// 二维码的前景色
    });
}


var d = new ClipboardJS('.btn-clipboard', {
    target: function (a) {
        return a.parentNode.previousSibling
    }
});
d.on('success', function (a) {
    showAlert('复制文本成功!', 'success', 1000);
    a.clearSelection()
});
d.on('error', function (a) {
    showAlert('复制失败，请手动复制', 'warning', 1000);
});
